<template>
    <div>
        <el-dialog :title="type == 'add' ? '新增' : '修改'" :visible.sync="isShow" width="60%">


            <!-- 表格 -->
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="角色名称" prop="rolename">
                    <el-input v-model="ruleForm.rolename"></el-input>
                </el-form-item>
                <el-form-item label="角色权限">
                    <el-tree :data="treeData" show-checkbox default-expand-all node-key="id" ref="tree"
                        highlight-current :props="defaultProps">
                    </el-tree>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="2">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <!-- pid？  title url status type 提交按钮调用接口menuedit或者menuadd -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="isShow = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { addRole, editRole } from '../../apis'
export default {
    props: ["isfoShow", "type"],
    data() {
        return {
            treeData: [],//树形控件的数据
            // 树形控件的配置
            defaultProps: {
                children: "children",
                label: "title", // 文字
            },
            isShow: false,
            isEditTo: true,
            //表单数据
            ruleForm: {
                rolename: '',
                menus: '',
                status: 1
            },
            rules: {
                rolename: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                ],
            }
        }
    },
    watch: {
        isfoShow() {
            this.isShow = true;
        },
    },
    //发请求 获取下拉菜单数据
    created() {
        this.getMenulist()
    },
    methods: {
        setVal(data) {
            // 给表单项赋值
            // 根据数据 在页面勾选对应的内容 实质是控制输入框（获取值、设置值）
            let arrTem = data.menus.split(',');
            // 第一次打开弹窗时 因为dom更新是异步的 此时tree还没加载 所以this.$refs.tree不存在
            // 避免报错的方式 快的（同步代码setCheckedKeys）等等慢的  慢的（异步加载dom）快一些
            // 需要setCheckedKeys延迟执行 延迟到dom加载成功后执行
            // nextTick这个函数将在 DOM 更新完成后被调用
            console.log(data);

            this.$nextTick(() => {
                // dom更新后才会执行这一句
                this.$refs.tree.setCheckedKeys([...arrTem]);
            })
            this.ruleForm = { ...data };
        },
        getMenulist() {
            this.$http("http://localhost:3000/api/menulist?istree=1").then((res) => {
                this.treeData = res.list;
            });

        },
        submit() {
            //校验表单  
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {//校验成功 提交数据
                    //获取用户勾选的菜单对应的id
                    // this.$refs.tree选中树形控件 getCheckedKeys()UI组件的方法
                    // 这里是父组件调用子组件的函数
                    this.ruleForm.menus = this.$refs.tree.getCheckedKeys().join()
                    // console.log(this.ruleForm);
                    //先判断新增还是修改
                    let res;
                    if (this.type == 'add') {
                        res = await addRole(this.ruleForm)
                    } else {
                        res = await editRole(this.ruleForm)
                    }
                    // console.log(res)
                    if (res.code == 200) {
                        this.$emit('update')
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
            this.isShow = false;
        },
    }
};
</script>

<style>

</style>